<template>
  <div ref="aceEditor" class="aceEditor"></div>
</template>

<script setup>
import ace from "ace-builds";
import 'ace-builds/src-min-noconflict/theme-sqlserver' // 新设主题
import 'ace-builds/src-min-noconflict/mode-javascript' // 默认设置的语言模式
import 'ace-builds/src-min-noconflict/mode-json' //
import 'ace-builds/src-min-noconflict/mode-css' //
import 'ace-builds/src-min-noconflict/ext-language_tools'
import 'ace-builds/src-min-noconflict/ext-beautify'
import {onMounted, ref} from "vue";

const aceEditor = ref(null)
onMounted(() => {
  console.log( aceEditor.value instanceof Element)
  const editor = ace.edit(aceEditor.value);
  editor.setTheme("ace/theme/sqlserver");
  editor.getSession().setMode("ace/mode/javascript");
  editor.getSession().setUseWrapMode(true);
  editor.getSession().setTabSize(2);
  editor.getSession().setUseSoftTabs(true);
  editor.getSession().setUseWrapMode(true);
  editor.getSession().setUseWorker(false);


});
</script>

<style scoped>
.aceEditor{
  height: 100%;
}
</style>
